<template>
  <div class="dashboard-container">
    <aside class="aside-style">
      <el-row>
        <el-col :span="3">
          <el-button icon="el-icon-circle-plus-outline" size="mini" type="primary" btn-text="删除" @click="addNewFun">新增</el-button>
        </el-col>
        <el-col :span="9">
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="选择日期进行查找"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
            @change="dateChange"
          />
        </el-col>
      </el-row>
    </aside>
    <el-table
      :data="list"
      border
      size="mini"
      style="width: 100%; margin-top:20px;"
      :height="getTabHeight"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="100"
      />
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        label="背景图"
        width="80"
      >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.background"
            style="height:20px"
            :src="scope.row.background"
            :preview-src-list="[scope.row.background]"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="标题颜色"
        width="100"
      >
        <template slot-scope="scope">
          <el-color-picker v-if="scope.row.title_color" v-model="scope.row.title_color" size="mini" disabled />
        </template>
      </el-table-column>
      <el-table-column
        label="内容颜色色"
        width="100"
      >
        <template slot-scope="scope">
          <el-color-picker v-if="scope.row.content_color" v-model="scope.row.content_color" size="mini" disabled />
        </template>
      </el-table-column>
      <el-table-column
        label="描述颜色"
        width="100"
      >
        <template slot-scope="scope">
          <el-color-picker v-if="scope.row.desc_color" v-model="scope.row.desc_color" size="mini" disabled />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-editor" size="mini" @click="editFun(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :limit="limit" @pagination="paginationFun" />
  </div>
</template>

<script>
import { getKnowledgeListApi } from '@/api/main'
import pagination from '@/components/Pagination'
export default {
  components: {
    pagination
  },
  data() {
    return {
      p: 1,
      limit: 10,
      date: '',
      list: [],
      total: 0
    }
  },
  computed: {
    getTabHeight() {
      const screenHeight = window.innerHeight
      return screenHeight - 250
    }
  },
  created() {
    this.getKnowledgeList()
  },
  methods: {
    dateChange(val) {
      console.log(val)
      this.getKnowledgeList()
    },
    addNewFun() {
      this.$router.push({
        name: 'knowledge_edit'
      })
    },
    getKnowledgeList() {
      const data = {
        p: this.p,
        limit: this.limit,
        date: this.date
      }
      console.log(data)
      getKnowledgeListApi(data).then(res => {
        console.log(res)
        this.list = res.list
        this.total = Number(res.count)
      })
    },
    paginationFun(val) {
      console.log(val)
      this.limit = val.limit
      this.p = val.page
      this.getKnowledgeList()
    },
    editFun(row) {
      this.$router.push({
        name: 'knowledge_redit',
        params: { date: row.date }
      })
    }
  }
}
</script>

<style lang="scss">
.dashboard {
    &-container {
        margin: 30px;
    }
    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
.el-icon-circle-close:before {
  color: #fff;
}
.el-image-viewer__canvas>img{
  max-width: 30% !important;
}
</style>
